<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>测试mybatis和spring的集成</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link href="../resources/jquery-pager/Pager.css" rel="stylesheet" type="text/css" />
<link href="../resources/css/bd.css" rel="stylesheet" type="text/css" />


</head>
<body>
<div id="content_list">
    <a href="javascript:void(0)" id="add_link">添加</a>
	<a href="javascript:void(0)" id="del_link">删除</a>
	<table border="1" width="400" id="tb_list">
		<tr>
			<th width="20"><input type="checkbox" id="checkAll"></th>
			<th>ID</th>
			<th>姓名</th>
		</tr>
		<c:forEach items="${pageModel.list }" var="user">
			<tr dataid=${user.id }>
				<td align="center" width="20"><input type="checkbox" name="ck"></td>
				<td align="center" class="detail" style="cursor: pointer;color: blue;">${user.id }</td>
				<td align="center">${user.username }</td>
			</tr>
		</c:forEach>
	</table>
	<p id="pager">
</div>

<div id="save_user" style="display: none;">
	<a href="javascript:void(0)" id="back">返回</a>
	用户姓名:<input id="username" type="text">
		<input id="userid" type="hidden">
	<input type="button" value="保存" id="btn_add">
</div>

<script src="../resources/js/jquery-1.9.0.min.js"></script>
<script src="../resources/jquery-pager/jquery.pager.js"></script>
<script type="text/javascript">
   $(document).ready(function() {
	   	if(${pageModel.totalPage >1}){
	  		 $("#pager").pager({ 
	           	pagenumber: "${pageModel.currentPage}", 
	           	pagecount: "${pageModel.totalPage}", 
	           	buttonClickCallback: function(page){
	           		window.location.href="user.htm?page="+page;
	           	}
	           });
	  		}
	   	$("body").keydown(function(event){
	   		var page=${pageModel.currentPage};
	   		var totalPage=${pageModel.totalPage};
	   		if(event.keyCode==37 && (page-1>0)){
	   			page--;
	   			window.location.href="user.htm?page="+page;
	   		} 
	   		if(event.keyCode==39 && (totalPage>=page+1)){
	   			page++;
	   			window.location.href="user.htm?page="+page;
	   		}
	   	});
	   	//添加
	   	$("#add_link").click(function(){
	   		$("#save_user").show();
	   		$("#content_list").hide();
	   	});
	   	$("#btn_add").click(function(){
	   		$.post("saveuser.htm",{id:$("#userid").val(),username:$("#username").val()},function(data){
	   			window.location.href="user.htm";
	   		})
	   	});
	   	//返回
	   	$("#back").click(function(){
	   		$("#save_user").hide();
	   		$("#content_list").show();
	   	});
	   	//删除
	   	$("#del_link").click(function(){
	   		var ids="";
	   		var $cks=$("input[type='checkbox'][name='ck']:checked");
	   		var len = $cks.length;
	   		if(len==0){
	   			alert("请选择");
	   			
	   		}else if(confirm("确认要删除？")){
	   			var ids;
		   		$cks.each(function(index){
		   			if(index==len-1){
		   				ids+=$(this).parents("tr").attr("dataid");
		   			}else{
		   				ids+=$(this).parents("tr").attr("dataid")+",";
		   			} 
		   		});
		   		$.post("deluser.htm",{userIds:ids},function(){
		   			window.location.href="user.htm";
		   		});
	   		}
	   		
	   	});
	   	//全选
	   	$("input[type='checkbox'][name='ck']").click(function(){
	   		var $subs = $("input[name='ck']");
	   		$("#checkAll").prop("checked" , $subs.length == $subs.filter(":checked").length ? true :false);
	   	});
	   	$("#checkAll").click(function(){
	   		$('input[name="ck"]').prop("checked",this.checked); 
	   	});
	   	//详细
	   	$(".detail").click(function(){
	   		$("#username").val("");
	   		$("#userid").val("");
	   		var userId=$(this).parents("tr").attr("dataid");
	   		$.get("userdetail.htm?id="+userId,function(data){
	   			$("#save_user").show();
		   		$("#content_list").hide();
		   		$("#username").val(data.username);
		   		$("#userid").val(data.id);
	   		},'json');
	   	});
   });
</script>
</body>
</html>